<template>
  <div class="container">
    <el-container style="border: 1px solid #eee">
      <el-aside width="300px" style="background-color: #fff; border-right: 1px solid #eee;">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <left-tree ref="leftTree" style="font-size: 13px;" @changeNode="changeNode" />
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 14px;">
          <main-header :type="mainType" :selectName="selectedName" :selectId="selectedId" />
        </el-header>

        <!-- <el-main style="text-align: left;">
          <main-user ref="user" v-if="mainType === 'user'" @change="change" :userId="selectedId" />
          <main-department ref="department" v-else-if="mainType === 'department'" @change="change" :departmentId="selectedId" />
        </el-main> -->

        <el-main style="text-align: left;">
          <main-list ref="list" :departmentId="selectedId" />
          <!-- <main-department ref="department" v-else-if="mainType === 'department'" @change="change" :departmentId="selectedId" /> -->
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
import LeftTree from './left-tree'
import MainHeader from './main-header'
import MainUser from './main-user'
import MainDepartment from './main-department'
import MainList from './main-list'

export default {
  name: 'organization',
  components: {
    LeftTree,
    MainHeader,
    MainUser,
    MainDepartment,
    MainList
  },
  data() {
    return {
      mainType: null,
      selectedId: 0,
      selectedName: ''
    }
  },
  methods: {
    changeNode(node) {
      if (this.mainType === node.type && this.selectedId === node.id) return
      this.mainType = node.type
      this.selectedId = node.id
      this.selectedName = node.name
    },
    change(entity) {
      this.$refs.leftTree.modifyNode(entity)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
}
.scrollbar-wrapper {
  .el-menu--collapse {
    .el-submenu {
      text-align: center;
      .iconfont {
        margin-right: 0;
      }
    }
  }
  .el-tooltip {
    text-align: center;
  }
}
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 3px 0;
}
</style>
